<template>
	<div class="loginWrap">
		<div class="login">
			<headers :childProp="state.parentData"></headers>
			<div class="content">
				<div class="form">
					<div class="top">
						<img src="@/assets/hmm/8.png" />
						<p>{{ state.checkPassWord }}</p>
					</div>
					<el-form
						ref="ruleFormRef"
						label-width="80px"
						:model="ruleForm"
						status-icon
						:hide-required-asterisk="false"
						:rules="rules"
						class="demo-ruleForm"
					>
						<el-form-item prop="pass" label="原始密码">
							<el-input v-model="ruleForm.pass" type="password" placeholder="请输入原始密码" show-password />
						</el-form-item>
						<el-form-item prop="newPass" label="修改密码">
							<el-input v-model="ruleForm.newPass" type="password" placeholder="请输入修改密码" show-password />
						</el-form-item>
						<el-form-item prop="surePass" label="确认密码">
							<el-input v-model="ruleForm.surePass" type="password" placeholder="请输入确认密码" show-password />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm(ruleFormRef)"> 保存 </el-button>
							<el-button type="primary" @click="layOut"> 退出登录 </el-button>
							<!-- <el-button type="primary" @click="resetForm(ruleFormRef)"> 重置 </el-button> -->
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import headers from '../hmm/components/headers.vue'
import { password, info } from '@/api/auth-hm'
const route = useRoute()
const router = useRouter()
const state = reactive({
	checkPassWord: '登录成功! 请修改初始密码!',
	parentData: {
		route: 'userInfo',
		userInfo: {},
		isTrue: true
	},
	routeId: 1
})
onMounted(() => {
	let user = sessionStorage.getItem('loginState')
	if (user == 'true') {
		state.checkPassWord = '登录成功! 请修改初始密码!'
	} else {
		state.checkPassWord = '请修改密码!'
	}
	roleListFun()
})
const sendState = item => {
	console.log(item)
}
const roleListFun = () => {
	let loginForm = {}
	info(loginForm).then((res: any) => {
		if (res.code == 0) {
			sessionStorage.setItem('userInfo', JSON.stringify(res.data))
			state.parentData.userInfo = res.data
		} else {
			ElMessage.error(res.msg)
		}
	})
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
	pass: '',
	newPass: '',
	surePass: ''
})
const rules = reactive<FormRules<RuleForm>>({
	pass: [
		{ required: true, message: '请输入原始密码', trigger: 'blur' }
		// { min: 4, max: 20, message: '新密码长度为 4-20 位', trigger: 'blur' },
	],
	newPass: [
		{ required: true, message: '请输入修改密码', trigger: 'blur' },
		{
			pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{8,}$/,
			message: '长度至少为8，至少包含有一个字母和一个数字',
			trigger: 'blur'
		}
	],
	surePass: [
		{ required: true, message: '请输入确认密码', trigger: 'blur' },
		{
			pattern: /^(?=.*\d)(?=.*[a-zA-Z]).{8,}$/,
			message: '长度至少为8，至少包含有一个字母和一个数字',
			trigger: 'blur'
		}
	]
})
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			if (ruleForm.pass == ruleForm.newPass) {
				ElMessage.error('原始密码和修改密码一致，请重新输入')
				return false
			} else if (ruleForm.newPass != ruleForm.surePass) {
				ElMessage.error('修改密码和确认密码不一致')
				return false
			} else {
				let loginForm = {
					password: ruleForm.pass,
					newPassword: ruleForm.newPass
				}
				password(loginForm).then((res: any) => {
					if (res.code == 0) {
						// 登录成功 获取信息放缓存
						ElMessage({
							message: '修改成功',
							type: 'success'
						})
						sessionStorage.removeItem('token')
						sessionStorage.removeItem('loginState')
						sessionStorage.removeItem('userInfoState')
						sessionStorage.removeItem('userInfo')
						sessionStorage.removeItem('platformId')
						router.push({
							path: '/login'
						})
					} else {
						ElMessage.error(res.msg)
					}
				})
			}
		} else {
			console.log('error submit!', fields)
		}
	})
}
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
}
const layOut = () => {
	sessionStorage.removeItem('loginState')
	ElMessage({
		message: '退出成功',
		type: 'success'
	})
	router.push('/login')
}
</script>

<style lang="scss" scoped>
.cf {
	zoom: 1;
}
.cf::after {
	display: block;
	height: 0;
	clear: both;
	font-size: 0;
	content: '.';
	visibility: hidden;
}
.loginWrap {
	background: linear-gradient(to right, #e1ecf7, #e7f3ff);
	height: 100%;
	overflow: auto;
	.login {
		.content {
			margin: 18px 16px;
			min-height: calc(100vh - 84px);
			background: #fff;
			position: relative;
			.form {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 460px;
				.top {
					img {
						display: block;
						width: 110px;
						margin: 0 auto 24px;
					}
					p {
						font-size: 20px;
						font-weight: 700;
						color: #303133;
						text-align: center;
					}
				}
				.demo-ruleForm {
					margin-top: 32px;
					::v-deep(.el-form-item) {
						position: relative;
						padding-bottom: 10px;
						.el-form-item__label {
							color: #303133;
							&::before {
								display: none;
							}
							&::after {
								content: '*';
								color: #f56c6c;
								margin-left: 4px;
							}
						}
						.el-form-item__content {
							font-size: 0;
							.el-input__suffix {
								.el-input__validateIcon {
									display: none;
								}
							}
							.el-form-item__error {
								padding-top: 4px;
							}
							.el-button {
								background: #409eff;
								border-color: #409eff;
								font-size: 14px;
								width: calc(50% - 8px);
								display: inline-block;
								vertical-align: middle;
								height: 40px;
								&:nth-child(2) {
									margin-left: 16px;
									background: #fff;
									color: #606266;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
<style>
.el-select__popper .el-select-dropdown__item.selected {
	color: #409eff !important;
}
.el-dropdown__popper .el-dropdown-menu .el-dropdown-menu__item:hover {
	color: #409eff !important;
}
</style>
